<template>
    <div class="goods">
        <ul>
            <li v-for=" item in goods " :key="item.name">
                <div><p><a :href="`#${item.name}`">{{item.name}}</a></p></div>
            </li>
        </ul>
        <div class="info">
            <div v-for=" item in goods " :key="item.name">
                <div :id="item.name" class="title">{{item.name}}</div>
                <div class="content">
                    <ul>
                        <li v-for=" food in item.foods ">
                            <img :src="food.image" alt="">
                            <div>
                                <p>{{food.name}}</p>
                                <p>{{food.description}}</p>
                                <p>
                                    <span>月销售1132份</span>
                                    <span>好评率11%</span>
                                </p>
                                <div>
                                    <p><span>￥</span><span>{{food.price}}</span></p>
                                    <p class="oldPrice" v-show=" food.oldPrice !== '' "><span>￥</span><span>{{food.oldPrice}}</span></p>
                                    <div class="showw">
                                        <count :food="food" ></count>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions , mapState } from 'vuex';
import count from '../../components/count.vue'
    export default {
        data(){
            return{};
        },
        components:{
            count,
        },
        created(){
            this.getData();
        },
        computed:{
            ...mapState(['goods'])
        },
        mounted(){
            console.log(this.goods);
        },

        methods:{
            ...mapActions(['getData']),
        },
    }
</script>

<style scoped>
.goods{
    width: 100%;
    height: 100%;
    /* background-color: red; */
    display: flex;
}
.goods>ul{
    width: 21.333vw;
    height: 111vw;
    /* background-color: blue; */
    overflow: auto;
}

.goods>ul>li{
    width: 21.333vw;
    height: 14.4vw;
    font-size: 3.2vw;
    padding: 0 3.2vw;
    line-height: 3.733vw;
    /* color: rgb(240, 20, 20); */
    /* font-weight: bold; */
    background-color: #f3f5f7;
}
.goods a{
    color: black;
}
.goods a:hover{
    color: black;
}
.goods>ul>li>div{
    width: 14.933vw;
    height: 14.133vw;
    /* background-color: blue; */
    display: flex;
    border-bottom: 0.267vw solid rgba(7, 17, 27, .1) ;
    justify-content: space-around;
    align-items: center;
}

.goods>.info{
    flex: 1;
    height: 111vw;
    /* background-color: red; */
    overflow: auto;
}

.goods>.info>div{
    width: 100%;
}
.goods>.info .title{
    width: 100%;
    background-color: #f3f5f7;
    height: 6.933vw;
    border-left: 1.067vw solid #d9dde1;
    box-sizing: border-box;
    padding-left: 3.733vw;
    font-size: 3.2vw;
    color: rgb(147, 153, 159);
    line-height: 6.933vw;
}
.goods>.info .content{
    padding: 4.8vw;
    width: 69vw;
    position: relative;
    overflow: hidden;
}
.goods>.info .content>ul{
    /* width: 100%; */
    /* background-color: aqua; */
}
.goods>.info .content>ul>li{
    /* width: 100%; */
    display: flex;
    align-items: center;
    border-bottom: 0.267vw solid rgba(7, 17, 27, .1);
    padding-bottom: 4.8vw;
    margin-bottom: 4.8vw;
    position: relative;
}
.goods>.info .content>ul>li:last-child{
    /* width: 100%; */
    display: flex;
    align-items: center;
    border-bottom: 0.267vw solid transparent;
    padding-bottom: 0;
    margin-bottom: 0;
}
.goods>.info .content>ul>li>img{
    width: 20vw;
    margin-right: 3.2vw;
}
.goods>.info .content>ul>li>div{
    /* background-color: blue; */
}
.goods>.info .content>ul>li>div>p:nth-child(1){
    font-size: 3.733vw;
    color: rgb(7, 17, 27);
    line-height: 3.733vw;
}
.goods>.info .content>ul>li>div>p:nth-child(2),.goods>.info .content>ul>li>div>p:nth-child(3){
    font-size: 2.667vw;
    color: rgb(147, 153, 159);
    line-height: 3.733vw;
}
.goods>.info .content>ul>li>div>p:nth-child(3)>span:first{
    margin-right: 3.2vw;
}
.goods>.info .content>ul>li>div>div{
    display: flex;
    font-weight: bold;
    line-height: 6.4vw;
    /* background-color: red; */
}
/* .goods>.info .content>ul>li>div>div>di{

} */
.goods>.info .content>ul>li>div>div>p:first-child{
    color: rgb(240, 20, 20);
    margin-right: 2.133vw;
}
/* .goods>.info .content>ul>li>div>div>p:last-child{
    color: rgb(149, 153, 159);
    font-size: 2.667vw;
    width: 100vw;
    height: 100vh;
    text-decoration: line-through;
} */

.oldPrice{
    color: rgb(149, 153, 159);
    font-size: 2.667vw;
    /* width: 100vw;
    height: 100vh; */
    text-decoration: line-through;
}
.goods>.info .content>ul>li>div>div>p>span:first-child{
    font-size: 2.667vw;
}
.goods>.info .content>ul>li>div>div>p:first-child>span:last-child{
    font-size: 4.267vw;
}


.showw{
    /* background-color: aqua; */
    position: relative;
    width: 24vw;
    height: 7vw;
    top: 0vw;
    right: -8vw;
}
</style>